<template>
  <div class="transferlist">
    <div class="transfertitle" :class="{'filterable':filterable}">
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
      ></el-checkbox>
      <span>{{title}}</span>
      <el-input
        v-if="filterable"
        placeholder="请输入内容"
        v-model="input"
        clearable
        @change="returnValue"
      ></el-input>
    </div>
    <div class="transfermain" :class="{'filterable':filterable}">
      <el-checkbox-group v-model="dataSon" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in screenData" :label="city.id" :key="city.id">{{city.name}}</el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkAll: false,
      dataSon: [],
      isIndeterminate: false,
      map: new Map(),
      input: ""
    };
  },
  //props: ["data", "defaultChecked", "title", "filterable"],
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    defaultChecked: {
      type: Array,
      default: () => {
        return [];
      }
    },
    title: { type: String, default: "列表" },
    filterable: { type: Boolean, default: false }
  },
  watch: {
    defaultChecked: function(newQuestion, oldQuestion) {
      this.dataSon = this.defaultChecked;
      this.isIndeterminate = false;
      this.checkAll = false;
    }
  },
  computed: {
    screenData: function() {
      return this.data.filter(
        (item, index, array) =>
          item.name.indexOf(this.input) != -1 ||
          this.$fz.pinyin
            .getFullChars(item.name)
            .toLowerCase()
            .indexOf(this.input) != -1 ||
          this.$fz.pinyin.getCamelChars(item.name).indexOf(this.input) != -1
      );
    }
  },
  mounted() {
    this.data.forEach(v => this.map.set(v.id, v));
    this.dataSon = this.defaultChecked;
    this.$emit("getValue", this.forArr());
    console.log();
  },
  methods: {
    forArr() {
      let arr = [];
      for (var i = 0, len1 = this.dataSon.length; i < len1; i++) {
        for (var j = 0, len = this.screenData.length; j < len; j++) {
          if (this.screenData[j].id == this.dataSon[i]) {
            arr.push(this.screenData[j]);
          }
        }
      }
      return arr;
    },
    returnValue() {
      this.$emit("getValue", this.forArr());
    },
    handleCheckAllChange(val) {
      let dataId = [];
      this.data.forEach(function(id, index) {
        dataId.push(id.id);
      });
      this.dataSon = val ? dataId : [];
      this.isIndeterminate = false;
      this.returnValue();
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.data.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.data.length;
      this.returnValue();
    }
  }
};
</script>

<style>
.transfer {
  height: 300px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
}
.transfer .button-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.transfer .el-button + .el-button {
  margin: 10px 0;
}
.transferlist {
  width: 25%;
  border: solid 1px #ddd;
  box-sizing: border-box;
}
.transferlist .el-checkbox {
  display: block;
}
.transferlist .transfertitle {
  padding: 0 15px;
  line-height: 40px;
  background-color: #eee;
  position: relative;
}
.transferlist .transfertitle .el-checkbox {
  vertical-align: middle;
  padding: 13px 0;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  box-sizing: border-box;
  padding-left: 15px;
}
.transferlist .transfertitle span {
  text-align: center;
  display: block;
}
.transferlist .transfermain {
  padding: 10px 15px;
  height: calc(100% - 40px);
  overflow-x: hidden;
  box-sizing: border-box;
}
.transferlist .transfermain .el-checkbox {
  margin: 5px 0;
}
.transfertitle.filterable {
  height: 90px;
}

.transfermain.filterable {
  height: calc(100% - 90px);
}
</style>